<template>
  <div class="login-box">
    <div class="login-logo">
      <b>vuetify</b>admin
    </div>
    <div class="login-box-body">
      <p class="login-box-msg">Sign in</p>
      <form>
        <v-text-field v-model="name" :error-messages="nameErrors" label="Name" append-icon="email"
                      required @input="$v.name.$touch()" @blur="$v.name.$touch()"></v-text-field>
        <v-text-field v-model="password" :error-messages="passwordErrors" label="Password" append-icon="lock"
                      required @input="$v.password.$touch()" @blur="$v.password.$touch()"></v-text-field>
        <v-checkbox v-model="checkbox" :error-messages="checkboxErrors" label="remember me" 
                    @change="$v.checkbox.$touch()"
          @blur="$v.checkbox.$touch()"></v-checkbox>

        <v-btn @click="submit">submit</v-btn>
        <v-btn @click="clear">clear</v-btn>
      </form>
    </div>
  </div>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, maxLength, minLength } from 'vuelidate/lib/validators'
import { login } from '@/api/login'

export default {
  mixins: [validationMixin],

  validations: {
    name: {
      required,
      maxLength: maxLength(10)
    },
    password: {
      required,
      minLength: minLength(6)
    },
    checkbox: {
      required
    }
  },

  data: () => ({
    name: '',
    password: '',
    checkbox: false
  }),
  created: () => {
    console.log(this.$v)
  },
  computed: {
    checkboxErrors () {
      const errors = []
      if (!this.$v.checkbox.$dirty) return errors
      !this.$v.checkbox.required && errors.push('You must agree to continue!')
      return errors
    },
    nameErrors () {
      const errors = []
      if (!this.$v.name.$dirty) return errors
      !this.$v.name.maxLength &&
        errors.push('Name must be at most 10 characters long')
      !this.$v.name.required && errors.push('Name is required.')
      return errors
    },
    passwordErrors () {
      const errors = []
      if (!this.$v.password.$dirty) return errors
      !this.$v.password.minLength &&
        errors.push('password must be at least 6 characters long')
      !this.$v.password.required && errors.push('password is required')
      return errors
    }
  },

  methods: {
    submit () {
      this.$v.$touch()
      console.log(this.$v)
      if (!this.$v.$invalid) {
        login(this.name, this.password).then(data => {
          if (data.data) {
            this.$router.push({ path: '/' })
          } else {
            console.log(this.$message)
            // this.$message.toast('error', '登录失败！')
          }
        })
      }
    },
    clear () {
      this.$v.$reset()
      this.name = ''
      this.password = ''
      this.checkbox = false
    }
  }
}
</script>

<style scoped>
.login-logo,
.register-logo {
  font-size: 35px;
  text-align: center;
  margin-bottom: 25px;
  font-weight: 300;
}

.login-logo a,
.register-logo a {
  color: #444;
}

.login-page,
.register-page {
  background: #d2d6de;
}

.login-box,
.register-box {
  width: 360px;
  margin: 7% auto;
}

@media (max-width: 768px) {
  .login-box,
  .register-box {
    width: 90%;
    margin-top: 20px;
  }
}

.login-box-body,
.register-box-body {
  background: #fff;
  padding: 20px;
  border-top: 0;
  color: #666;
}

.login-box-body .form-control-feedback,
.register-box-body .form-control-feedback {
  color: #777;
}

.login-box-msg,
.register-box-msg {
  margin: 0;
  text-align: center;
  padding: 0 20px 20px 20px;
}
</style>
